<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐商城页面</title>
    <link rel="stylesheet" href="./css/shop.css">
</head>

<body>
    <!-- 顶部导航条 -->
    <div class="nav">
        <div class="center">
            <div class="nav-top">
                <div class="logo">
                    <img src="./img/shop/logo.png" alt="">
                    <h1> 网易云音乐·商城</h1>
                </div>


                <div class="nav-right">
                    <input type="text" class="search" placeholder="输入要搜索的商品名">
                    <div class="shop-cart">
                        <img src="./img/shop/shop-cart.png" alt="">
                    </div>
                    <button>登录</button>
                </div>

            </div>
        </div>
    </div>


    <!-- 轮播图 -->
    <div class="lunbo">
        <div class="center">
            <!-- 最大的容器 -->
            <div class="box">
                <!-- 移动的容器 -->
                <ul class="list">
                    <!-- 轮播图片 -->
                    <li class="on">
                        <img src="./img/shop/lunbo1.jpg" alt="" />
                    </li>
                    <li>
                        <img src="./img/shop/lunbo2.jpg" alt="" />
                    </li>
                    <li>
                        <img src="./img/shop/lunbo3.jpg" alt="" />
                    </li>
                    <li>
                        <img src="./img/shop/lunbo1.jpg" alt="" />
                    </li>
                    <li>
                        <img src="./img/shop/lunbo2.jpg" alt="" />
                    </li>
                </ul>
                <!-- 左右按钮 -->
                <a class="btn prev">&lt;</a>
                <a class="btn next">&gt;</a>
                <!-- 分页器 -->
                <ol class="page">
                    <li class="on"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <script>
                //1.找到对应的DOM节点
                var box = document.querySelector(".box"); //找到容器盒子
                var list = document.querySelector(".list");
                var listli = document.querySelectorAll(".list li");
                var len = document.querySelectorAll(".page li").length;
                var ltBtn = document.querySelector(".prev");
                var rtBtn = document.querySelector(".next");
                var page = document.querySelector(".page");
                var pageli = document.querySelectorAll(".page li");
                //2.当前所处的下标
                var curIndex = 0;
                //3.左按钮点击事件
                ltBtn.onclick = function () {
                    curIndex--;
                    if (curIndex <= -1) {
                        curIndex = len - 1;
                    }
                    console.log(listli.length);
                    //当前下标相同的显示,也就是添加上on,其他的去掉on
                    for (var i = 0; i < listli.length; i++) {
                        listli[i].classList.remove("on");
                    }
                    listli[curIndex].classList.add("on");
                    // 处理下标对应
                    for (var j = 0; j < pageli.length; j++) {
                        pageli[j].classList.remove("on");
                    }
                    pageli[curIndex].classList.add("on");
                };
                // 4.右按钮点击事件
                rtBtn.onclick = function () {
                    curIndex++;
                    if (curIndex >= len) {
                        curIndex = 0;
                    }
                    // 当前下标相同的显示,也就添加on,其他的去掉on
                    for (var i = 0; i < listli.length; i++) {
                        listli[i].classList.remove("on");
                    }
                    listli[curIndex].classList.add("on");
                    // 处理下标对应
                    for (var j = 0; j < pageli.length; j++) {
                        pageli[j].classList.remove("on");
                    }
                    pageli[curIndex].classList.add("on");
                };

                //5.分页下标点击事件
                for (var i = 0; i < pageli.length; i++) {
                    //ol下的li全部添加了data-index属性,意思就是给每个li加上了属于自己的序号
                    pageli[i].setAttribute("data-index", i);
                    pageli[i].onclick = function () {
                        console.log(this.getAttribute("data-index"));
                        curIndex = this.getAttribute("data-index");
                        for (var i = 0; i < listli.length; i++) {
                            listli[i].classList.remove("on");
                        }
                        listli[curIndex].classList.add("on");
                        // 处理下标对应
                        for (var j = 0; j < pageli.length; j++) {
                            pageli[j].classList.remove("on");
                        }
                        pageli[curIndex].classList.add("on");
                    };
                }
                //6.自动播放
                var timer = setInterval(function () {
                    rtBtn.onclick();
                }, 3000);
                //7.鼠标移入定时器停,移除,定时器开启
                box.onmouseenter = function () {
                    clearInterval(timer);
                };
                box.onmouseleave = function () {
                    timer = setInterval(function () {
                        rtBtn.onclick();
                    }, 3000);
                };
            </script>
        </div>
    </div>




    <!-- 轮播图下的分类区 -->
    <div class="fenlei">
        <div class="center">
            <div class="box">
                <div>
                    <div><img src="./img/shop/f3-1.png" alt=""></div>
                    <h5>热销商品</h5>
                </div>
                <div>
                    <div><img src="./img/shop/f3-1.png" alt=""></div>
                    <h5>热销商品</h5>
                </div>
                <div>
                    <div><img src="./img/shop/f3-1.png" alt=""></div>
                    <h5>热销商品</h5>
                </div>
                <div>
                    <div><img src="./img/shop/f3-1.png" alt=""></div>
                    <h5>热销商品</h5>
                </div>
            </div>
        </div>
    </div>


    <!-- 商品主体内容 -->
    <div class="main">
        <div class="center">
            <!-- 主体部分大图区域 -->
            <div class="m-img">
                <div class="img-left"><img src="./img/shop/middle-1.jpg" alt=""></div>
                <div class="img-right"><img src="./img/shop/middle-2.jpg" alt=""></div>
            </div>

            <!-- 主体部分编辑推荐区域  -->
            <div class="edit">
                <h2>编辑推荐</h2>
                <ul class="box">
                    <li>
                        <div><img src="./img/shop/bianji1.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/bianji2.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/bianji3.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/bianji4.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/bianji5.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/bianji6.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/bianji7.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/bianji8.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                </ul>
            </div>

            <!-- 主体部分数字专辑区域 -->
            <div class="album">
                <!-- 数字专辑左侧 -->
                <div class="album-left">
                    <h1>数字专辑</h1>
                    <p>(G)I-DLE、王嘉尔数字专辑火热售卖中</p>
                    <a href="">立即购买></a>
                </div>
                <!-- 数字专辑右侧 -->
                <div class="album-right">
                    <img class="img-s" src="./img/shop/数字专辑-1.jpg" alt="">
                    <img class="img-b" src="./img/shop/数字专辑-2.jpg" alt="">
                </div>
            </div>

            <!-- 主体部分热门商品区域 -->
            <div class="hot">
                <h2>热门推荐</h2>
                <ul class="box">
                    <li>
                        <div><img src="./img/shop/hot1.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/hot2.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/hot3.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/hot4.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/hot5.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/hot6.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/hot7.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                    <li>
                        <div><img src="./img/shop/hot8.jpg" alt=""></div>
                        <a href=""> i12真无线蓝牙耳机 智能触控 双耳运动跑步 安卓苹果通用</a>
                        <span>$16.9</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer-nav">
        <div class="center">
            <div class="footer">
                <!-- 底部左边 -->
                <div>
                    <!-- 底部左边第一行 -->
                    <p>
                        <a href="">服务条款</a>
                        <span>|</span>
                        <a href="">隐私政策</a>
                        <span>|</span>
                        <a href="">儿童隐私政策</a>
                        <span>|</span>
                        <a href="">版权投诉</a>
                        <span>|</span>
                        <a href="">投资者关系</a>
                        <span>|</span>
                        <a href="">广告合作</a>
                        <span>|</span>

                    </p>
                    <!-- 底部左边第二行 -->
                    <p>
                        <span>网易科技有限公司</span>
                        <span>运营：浙网文[2021] 1186-054号</span>
                    </p>
                    <!-- 底部左边第三行 -->
                    <p>
                        <span>粤B2-20090191-18</span>
                        <span>工业和信息化部管理系统网站</span>
                        <span>浙公网安备 54821498号</span>
                    </p>
                </div>
                <!-- 底部右边 -->
                <ul>
                    <li><img src="./img/index/footer1.png" alt=""> </li>
                    <li><img src="./img/index/footer2.png" alt=""> </li>
                    <li><img src="./img/index/footer3.png" alt=""> </li>
                    <li><img src="./img/index/footer4.png" alt=""> </li>
                    <li><img src="./img/index/footer5.png" alt=""> </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>